<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>嵌套路由</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.js"></script>
</head>

<body>
    <div id="app">
        <h1>Clothers for Humans</h1>
        <ul>
            <li>
                <router-link to="/">Home</router-link>
            </li>
            <li>
                <router-link to="/clothes">Clothes</router-link>
            </li>
        </ul>
        <router-view></router-view>
    </div>

    <script>
        Vue.use(VueRouter);

        const Home = { template: '<div>Welcome to Clothes for Humans</div>' };
        const Clothes = { template: '<div>Today we have shoes</div>' };
        const Sales = { template: '<div>Up to 50% discounts!Buy!</dvi>' };
        const NotFound = { template: '<div>404 Page Not Found</div>' };
        const Shoe = { template: '<div>Size {{ $route.params.size }}</div>' };
        const Air = { template: '<div>Air</div>' }
        const Bags = { template: '<div>Bags</div>' }
        const SuperShirt = { template: '<div>SuperShirt of size {{ $route.params.size }}</div>' }
        const Shirt = { template: '<div>Shirt {{ $route.params.size }}</div>' }

        const router = new VueRouter({
            routes: [
                { path: '/', component: Home, redirect: '/last-year-sales' },
                { path: '/clothes', name: 'listing', component: Clothes },
                { path: '/shoes', redirect: { name: 'listing' } },
                { path: '/last-year-sales', component: Sales },
                { path: '/de/Schuh/:size', redirect: '/en/shoe/:size' },
                { path: '/en/shoe/:size', component: Shoe },
                { path: '/air', component: Air },
                { path: '/bags', name: 'bags', component: Bags },
                { path: '/super-shirt/:size', component: SuperShirt },
                { path: '/shirt/:size?', component: Shirt },
                {
                    path: '/shirts/:size?',
                    redirect: to => {
                        // 这三个属性在to中
                        const { hash, params, query } = to
                        if (query.colour === 'transparent') {
                            return { path: '/air', query: null }
                        }
                        if (hash === '#prada') {
                            return { name: 'bags', hash: '' }
                        }
                        if (params.size > 10) {
                            return '/super-shirt/:size'
                        } else {
                            return '/shirt/:size?'
                        }
                    }
                },
                { path: '/404', component: NotFound },
                { path: '*', redirect: '/404' }
            ]
        });

        new Vue({
            router,
            el: '#app'
        })
    </script>
</body>

</html>